<template>
	<JsBox class="demoList">
		<JsTree :params="fTree" />
		<JsTable
			@sort-change="sortChange"
			row-key="id"
			headerSetting
			headerStoreKey="demoList"
			i18nPath="demo.config"
			:i18nField="i18nField"
			:title="tableHeadTitle"
			:tableHead="fTable.tableHead"
			:tableData="fTable.tableData"
		/>
	</JsBox>
</template>

<script>
//默认线性布局的表单页面
import cComponent from './config/cnf_component';
import cTable from './config/cnf_table';
import jiess from '@/jiess';
export default {
	mixins: [jiess.mixin_base, jiess.mixin_filter],
	data() {
		return {
			i18nField: null,
			layout: {
				'show-elevator': true,
				'show-sizer': true
			},
			tableHeadTitle: {
				title: '这是列表的标题',
				style: {
					backgroundColor: 'white',
					display: 'block'
				}
			},
			pageConfig: {
				//表单配置使用的数据源
				formResource: cComponent,
				//列表表头使用的数据源
				tableResource: cTable,
				form: [
					{
						paramKey: 'main'
					}
				],
				table: {
					//筛选组件和列表表头公有的key
					paramKey: 'main',
					//传入配置函数的参数
					customConfig: {},
					//列表请求接口
					httpInterface: this.$jiess.api.GetListDatas,
					//开启实时刷新
					realTimeRefresh: true
				}
			}
		};
	},
	created() {
		this.i18nField = this.ui === 'element' ? 'label' : 'title';
		this.init(this.pageConfig, undefined, {
			i18nFieldLabel: 'label',
			i18nPathLabel: 'demo.config',
			i18nPathPlaceholder: 'demo.config',
			i18nPathInnerText: 'demo.config',
			i18nPathOption: 'demo.config'
		});
	},
	methods: {
		edit(row, index, param, event) {
			console.log(row, index, param, event);
		},
		sortChange({ prop, order }) {
			this.toRefresh(
				(values, baseParam) => {
					baseParam.prop = prop;
					baseParam.order = order;
					return values;
				},
				{
					tableName: 'demoList1',
					resetType: 1
				}
			);
		}
	}
};
</script>
